<template>
  <view class="bjys2">
    <view @click="navigateBtn()" class="play_back">
      <image src="@/static/img/play_back.png" mode=""></image>
    </view>
    <view class="title">
      播放历史
      <image src="@/static/img/del.png" @click="del"></image>
    </view>
    <view class="content" v-if="hd">
      <view class="swiperItem">
        <swiper class="swiper3" :duration="1000" autoplay :interval="2000" circular :current="current" @change="change">
          <swiper-item v-for="(item,index) in hd" :key="index" @click="webBtn(item.hd_url)">
            <view class="swiper3_item" :class="current==index?'swiper2_active':''">
              <image class="" :src="item.hd_pic" mode="widthFix"></image>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="indexbox">
      <view class="indexbox_left" v-for="(item,index) in collect" :key="index" @click="playBtn(item)">
        <view class="inox_left_img" v-if="item.vod_pic" :style="{'backgroundImage':'url('+item.vod_pic+')' }"></view>
        <view class="inox_left_img" v-else :style="{'backgroundImage':'url('+gifUrl+')' }">
        </view>
        <image class="inox_left_icon" src="@/static/img/collect_btn.png" v-if="scztList.indexOf(item.vod_id) == -1"
          @click.stop="sczt(item.vod_id)" mode="widthFix"></image>
        <image class="inox_left_icon" src="@/static/img/collect_btn_active.png" v-else @click.stop="sczt(item.vod_id)"
          mode="widthFix"></image>
        <view class="videoBox-bottom">
          <view class="vib_left">
            <image src="@/static/img/e.png" mode="widthFix"></image>
            <span>{{item.vod_play || 2}}</span>
          </view>
          <view class="vib_right">
            <image src="@/static/img/e.png" mode="widthFix"></image>
            <span>{{ item.vod_addtime }}</span>
          </view>
        </view>
        <view class="inl_content">{{ item.vod_name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        collect: [],
        scztList: [],
        hd: [],
        gifUrl: 'https://www.tmtv777.com/img/logo.1cecf4f4.gif',
      }
    },
    methods: {
      webBtn(url) {
        plus.runtime.openURL(url, function() {
          console.log(res, 123)
        })
        // uni.navigateTo({
        //   url: '/pages/wevview?url=' + url
        // })
      },
      navigateBtn() {
        uni.navigateBack();
      },
      playBtn(item) {
        uni.navigateTo({
          url: `./player?playid=${item.vod_id}`
        })
      },
      /**
       * 收藏
       */
      sczt(scid) {
        this.scztList = uni.getStorageSync('vod_id') || [];
        this.$http.sczt({
          scid: scid,
          token: uni.getStorageSync('phone')
        }).then(res => {
          if (res.code == 200) {
            if (res.message == '收藏成功') {
              this.$toast(res.message)
              this.scztList.push(scid);
              uni.setStorageSync('vod_id', this.scztList)
            } else if (res.message == '取消收藏') {
              this.scztList = uni.getStorageSync('vod_id') || [];
              this.scztList.slice().reverse().forEach((item, index, arr1) => {
                if (item === scid) {
                  this.scztList.splice(arr1.length - 1 - index, 1);
                }
              });
              uni.setStorageSync('vod_id', this.scztList)
              this.$toast(res.message)
            }
          }
        })
      },
      del() {
        let _this = this;
        uni.showModal({
          title: '确定要删除所有已收藏的视频吗？不可恢复',
          confirmText: '我很确定',
          success: function(res) {
            if (res.confirm) {
              _this.sclistdel();
            } else if (res.cancel) {}
          }
        });
      },

      sclistdel() {
        this.$http.sclistdel({
          token: uni.getStorageSync('phone')
        }).then(res => {
          if (res.code == 200) {
            this.$toast = '删除成功';
          }
        }).catch(err => {
          console.log(err)
        })
      }

    },
    onLoad() {
      this.$http.indexIn().then(res => {
        if (res.code == 200) {
          this.hd = res.data.hd;
        }
      })
      let token = uni.getStorageSync('token') || 'none';
      if (token == 'none') {
        uni.showModal({
          title: '提示',
          content: "请登录！",
          success: function(res) {
            if (res.confirm) {
              uni.reLaunch({
                url: '/pages/login/index'
              });
            } else if (res.cancel) {
              uni.navigateBack();
            }
          }
        })
      }
      this.scztList = uni.getStorageSync('vod_id') || [];
      this.$http.playjl({
        token: uni.getStorageSync('phone')
      }).then(res => {
        if (res.code == 200) {
          this.collect = res.data.collectlist;
        }
      })
    }
  }
</script>

<style lang="less">
  .bjys2 {
    padding-top: 50rpx;
    padding-bottom: 20rpx;
    height: 170rpx;
    width: 750rpx;
    top: 0;
    position: absolute;
    width: 100%;
    background: linear-gradient(90deg, #bdc3c7, #2c3e50);
    border-bottom-right-radius: 30rpx;
    border-bottom-left-radius: 30rpx;

    .title {
      margin-bottom: 20rpx;
      position: relative;
      font-size: 32rpx;
      text-align: center;
      color: #FFFFFF;

      image {
        position: absolute;
        right: 30rpx;
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .indexbox {
    margin-bottom: 30rpx;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 60rpx;

    .indexbox_left {
      position: relative;
      margin-left: 15rpx;
      margin-bottom: 55rpx;
      width: 47%;
      height: 250rpx;
      box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
      border-radius: 20rpx;
      background-color: #ddd;

      .inl_content {
        position: absolute;
        width: 98%;
        bottom: -50rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        border-radius: 10rpx;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        right: 15rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 80%;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          span {
            margin-right: 20rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-right: 0;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  .play_back {
    position: fixed;
    top: 40rpx;
    z-index: 99999999999;
    left: 20rpx;
    width: 70rpx;
    height: 70rpx;

    image {
      width: 70rpx;
      height: 70rpx;
    }
  }

  .swiperItem {
    position: relative;
    width: 100%;
    min-height: 210rpx;
    margin-bottom: 30rpx;
  }

  .swiper3 {
    position: relative;
    width: 100%;
    height: 430rpx;
    display: flex;
    align-items: center;

    swiper-item {
      text-align: center;

      .swiper3_item {
        display: flex;
        width: 100%;
        height: 430rpx;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        transition: all 0.5s ease;
        overflow: hidden;
        border-radius: 40rpx;

        image {
          width: 100%;
        }
      }
    }
  }
</style>
